<template>
  <div>
    <div class=" c-ph24 c-pv16 c-flex-row c-justify-sb c-aligni-cente" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)" :class="[item.position == 2 ? 'fixedTop c-pz1000' : '', !isSetPageBackground ? 'c-bg-white' : '']">
      <div @click="clickGoCourseSearch(item.items.isMallType)" class="c-hh60 search-bg c-flex-row c-aligni-center c-w0 c-flex-grow1 c-pl24" :style="getBorderRadius(borderRadius, '0.3rem')">
        <span class="iconfont c-fs28 c-fw-b c-fc-gray">&#xe6d6;</span>
        <span class="c-fs26 c-fc-gray c-ml16 c-text-ellipsis1 c-pr8">{{item.items.content ? item.items.content : '搜索'}}</span>
      </div>
      <div v-if="companyAuth.enablePoints == 1 && item.items.iconEnable == 1 && !$isWxApp()" @click="goSignIndex" class="c-hh60 c-flex-row c-flex-center c-ml16">
        <span v-if="!item.items.icon" class="icon iconfont c-fs40">&#xe7f5;</span>
        <img v-else :src="$addXossFilter(item.items.icon)" class="c-ww40 c-hh40" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import { appRouterChange } from "@/mixin/appRouterPush.js";
import { customStyle } from '@/utils/customStyle.js'
export default {
  mixins: [appRouterChange, customStyle],
  components: {
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0
    };
  },
  computed: {
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
    marginSettings() {
      return this.item.styleParam && this.item.styleParam.marginSettings ? this.item.styleParam.marginSettings : null
    },
  },
  methods: {
    goSignIndex() {
      let toPath = '/member/myIntegral/integralIndex';
      this.iosAppRouteChange(toPath);
    },
    clickGoCourseSearch(isMallType) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let toPath = "";
      toPath = isMallType == 1 ? "/mall/search/searchShop" : "/homePage/search/searchList";
      this.iosAppRouteChange(toPath);
    },
  },
};
</script>

<style scoped>
.search-bg {
  background: #f4f7f9;
}
.fixedTop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  max-width: 16rem;
}
</style>
